<template>
  <div class="head-input">
    <div class="head-label">厂商ID：</div>
    <el-select class="selct" v-model="activeItem" clearable filterable @change="changeFn" :disabled="disabled">
      <el-option v-for="item in data" :key="item.ServiceID" :label="item.ServiceID" :value="item.ServiceID">{{item.ServiceID}}</el-option>
    </el-select>
  </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue';
export default defineComponent({
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['change'],
  setup(prop, ctx) {
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    const data: any = ref([])
    const activeItem = ref('')
    const initData = () => {
      GL.$axios.get(GL.$api.video.QueryConfig, {params: {Type: 1}}).then((res: any) => {
        if(res.Code === 0) {
          data.value = res.Services
        }
      })

    }
    const changeFn = () => {
      let items;
      data.value.forEach(element => {
        if(element.ServiceID === activeItem.value) {
          items = element
        }
      });
      ctx.emit('change', items);
    }
    initData ()
    return {
      data,
      activeItem,
      changeFn
    }
  }
})

</script>
<style lang="scss" scoped>
.head-input{
  // margin-left: 20px;
  display: flex;
  align-items: center;
  .head-label{
    display: inline-block;
    width: 120px;
  }
  .selct{
    height: 40px;
    line-height: 40px;
  }
} 
</style>